/*编辑页 start*/
var edit = true;

$('.border-style').on('click', function () {
    var style = $(this).attr('data-style');
    $('#photo-box').removeClass().addClass('photo-box ' + style + '')
})


$('.create-ok').on('click', function () {
    $('.move').removeClass('active');
    $('.edit-box').hide();

    if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
        $('#scene-4 .back').hide();
    }

    
    $('#scene-4 .music').hide()
    $('.pep-info').show();
    $('.edit-bar').hide();

    $('#photo-box').addClass('pos')

    // $('.save').show()
})

$('#scene-4 .back').on('touchend',function(){
    $('.move').removeClass('active').remove();
    $('#photo-box').removeClass().addClass('photo-box style-1');
    $('.border-box').attr('src','').hide()
})


$('.save').on('touchend', function () {
    $(this).hide();
    $('#scene-4 .back').hide()
    $('#scene-4 .music').hide()
    $('.edit-bar').hide();
    $('.move').removeClass('active');
    //edit = false
})

$('#photo-box').on('touchstart', function () {
    if (edit) {
        $('.edit-box').show();
        $('.pep-info').hide();
        $('.edit-bar').hide();
        $('#scene-4 .back').show();
        $('#photo-box').removeClass('pos')
        //$('#scene-4 .music').show();
    }
})

$('#scene-4 .pep-info').on('click',function(){
    $('.edit-box').show();
        $('.pep-info').hide();
        $('.edit-bar').hide();
        $('#scene-4 .back').show();
        $('#photo-box').removeClass('pos')
})


$(document).ready(function () {
    var jQueryEventFix = $.event.fix;
    $.event.fix = function (event) {
        var offset, originalEvent, touches;
        event = jQueryEventFix.call($.event, event);
        originalEvent = event.originalEvent;
        var jcanvasScale = 1;
        if (originalEvent) {
            if (originalEvent.type == 'touchmove') originalEvent.preventDefault();
            var target = originalEvent.target;
            if (target.tagName == 'CANVAS' && target.getAttribute('jcanvasScale')) {
                jcanvasScale = parseInt(target.getAttribute('jcanvasScale'));
            }
            touches = originalEvent.changedTouches;
            if (event.pageX !== undefined && event.offsetX === undefined) {
                offset = $(event.currentTarget).offset();
                try {
                    if (offset) {
                        event.offsetX = (event.pageX - offset.left) * jcanvasScale;
                        event.offsetY = (event.pageY - offset.top) * jcanvasScale;
                    }
                } catch (error) { }
            } else if (touches) {
                try {
                    offset = $(event.currentTarget).offset();
                    if (offset) {
                        event.offsetX = (touches[0].pageX - offset.left) * jcanvasScale;
                        event.offsetY = (touches[0].pageY - offset.top) * jcanvasScale;
                    }
                } catch (error) { }
            }
        }
        return event;
    };
    var imgScaleMin = 0.5,
        imgScaleMax = 2;
    var elelayer;
    

    $('.tz-style').on('click', confirmTitle);

    var itemList = [];
    var increaseId = 0;
    var selectId = 0;
    var item = {};
    function confirmTitle() {
        var widthOrg = 0, heightOrg = 0;
        increaseId++;
        var left = ($('.photo-box').width()) / 2;
        var top = ($('.photo-box').height()) / 2;
        elelayer = $('<span data-id=' + increaseId + ' class="move active" style="left:' + left + 'px;top:' + top + 'px"> <a class="close"></a><a class="rotate"></a></span>').appendTo(".photo-box");
        var id = $(this).data("id");
        var src = $(this).attr("src");

        imgChild = $('<img/>').attr({
            src: src
        }).appendTo(elelayer).addClass("wid" + id);
        widthOrg = elelayer.find('img').width();
        heightOrg = elelayer.find('img').height();
        var data = {
            id: increaseId,
            width: widthOrg,
            height: heightOrg,
            tx: 0,
            ty: 0,
            _tx: 0,
            _ty: 0,
            rx: 0,
            ry: 0,
            _rx: 0,
            _ry: 0,
            disPtoO: 0,
            scale: 1,
            left: left,
            top: top,
            anglePre: 0,
            angleNext: 0,
            rotate: 0,
            ox: left + widthOrg / 2,
            oy: top + heightOrg / 2,
            r: Math.sqrt(widthOrg * widthOrg + heightOrg * heightOrg) / 2
        }
        itemList[itemList.length] = data;
    }



    $('.photo-box').on("touchstart", '.rotate ',
        function (e) {
            if (!edit) return;
            selectId = $(this).parent().attr('data-id');
            itemList.forEach(function (currentValue) {
                if (selectId == currentValue.id) {
                    item = currentValue
                }
            })
            e.preventDefault();
            item.rx = e.offsetX;
            item.ry = e.offsetY;
            item.anglePre = getAngle(item.ox, item.oy, e.offsetX, e.offsetY);
        })
    $('.photo-box').on("touchmove", '.rotate',
        function (e) {
            if (!edit) return;
            e.preventDefault();
            item.disPtoO = getDistancs(item.ox, item.oy, e.offsetX, e.offsetY);
            item.scale = (item.disPtoO / item.r).toFixed(2);
            if (item.scale >= imgScaleMax) item.scale = imgScaleMax
            if (item.scale <= imgScaleMin) item.scale = imgScaleMin
            // item.angleNext = getAngle(item.ox, item.oy, e.offsetX, e.offsetY);
            // item.rotate += item.angleNext - item.anglePre;
            $(this).parent().css({
                scale: item.scale,
                //rotate: item.rotate
            })
            $(this).css({
                scale: 1 / item.scale
            }).parent().find('.close').css({
                scale: 1 / item.scale
            })
            //item.anglePre = item.angleNext;
        })
    $(".photo-box").on('touchstart', '.move img',
        function (e) {
            if (!edit) return;
            selectId = $(this).parent().attr('data-id');
            $(".move").removeClass('active');
            $(this).parents(".move").addClass('active');
            itemList.forEach(function (currentValue) {
                if (selectId == currentValue.id) {
                    item = currentValue
                }
            })
            item.tx = e.offsetX;
            item.ty = e.offsetY;



            $('.edit-box').show();
            $('.pep-info').hide();
            $('#scene-4 .back').show();



            //$('#scene-4 .music').show()



        })
    $(".photo-box").on('touchmove', '.move img',
        function (e) {
            if (!edit) return;
            item._tx = e.offsetX - item.tx;
            item._ty = e.offsetY - item.ty;
            item.left += item._tx;
            item.top += item._ty;
            $(this).parent().css({
                left: item.left,
                top: item.top
            })
            item.ox = +item.left + item.width / 2;
            item.oy = +item.top + item.height / 2;
            item.tx = e.offsetX;
            item.ty = e.offsetY;
        })
    $(".photo-box").on('touchend', '.move img',
        function (e) {
            if (!edit) return;
            itemList.forEach(function (currentValue) {
                if (selectId == currentValue.id) {
                    currentValue = item;
                }
            })
        })
    $(".photo-box").on('touchend', '.close',
        function (e) {
            if (!edit) return;
            $(this).parents(".move").remove()
        })
    function getAngle(px, py, mx, my) {
        var x = px - mx;
        var y = py - my;
        var angle = Math.atan2(y, x) * 360 / Math.PI;
        return angle;
    }
    function getDistancs(cx, cy, pointer_x, pointer_y) {
        var ox = pointer_x - cx;
        var oy = pointer_y - cy;
        return Math.sqrt(ox * ox + oy * oy);
    }
    $(".preventDefault").on("touchmove", function (e) {
        e.preventDefault();
    })


    //边框编辑
    $('.edit-border').on('click',function(){
        var src = $(this).attr('src');
        $('.border-box').attr('src',src).show();
    })

});
/*编辑页 end*/